<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="4-zjt-vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <!--{{ message }}-->
    11 {{ message }} 11
    <div>
        2222
        <div>
            {{ message }}
            <div></div>
            <!--{{ noData }}-->
        </div>
    </div>
    <div v-html="htmlData"></div>
    <input v-model="modelData"/> {{ modelData }}
</div>
</body>
<script>
    // let obj = {
    //     name: '张三',
    //     age: 20
    // }
    //
    // let newObj = new Proxy(obj, {
    //     get(target, key) {
    //         return target[key];
    //     },
    //     set(target, key, newValue) {
    //         target[key] = newValue;
    //         return true;
    //     }
    // });

    let vm = new Zvue2({
        el: '#app',
        data: {
            message: '测试数据',
            htmlData: 'html数据',
            modelData: 'model数据'
        }
    })

    setTimeout(() => {
        vm.$options.data.message = '修改数据';
        console.log(vm.$options.data.message);
    }, 1000)
</script>
</html>